import React from 'react'
import { Button, Input, InputGroup, Stack, InputLeftAddon, InputRightAddon, FormHelperText, FormControl } from '@chakra-ui/react'
import { FaUserAlt, FaLock, FaCheck } from 'react-icons/fa'

function SignIn() {
  return (
    <form>
      <Stack spacing="0">
        <FormControl isDisabled isInvalid>
          <InputGroup>
            <InputLeftAddon children={<FaUserAlt />} />
            <Input placeholder="请输入用户名" />
          </InputGroup>
          <FormHelperText mt="0">用户名是必填项</FormHelperText>
        </FormControl>
        <InputGroup>
          <InputLeftAddon children={<FaLock />} />
          <Input placeholder="请输入用户名" />
          <InputRightAddon children={<FaCheck />} />
        </InputGroup>
        <Button colorScheme="teal" _hover={{bgColor: 'tomato'}} w="100%">登录</Button>
      </Stack>
    </form>
  );
}

export default SignIn;
